<template>
  <uv-popup ref="popup" mode='top' zIndex='1000' safeAreaInsetTop bgColor='#FFFFFF'>
    <view>
      <view style="width: 100%; height: calc(120rpx + 44px);"></view>
      <view class="bigTitle">帖子类型</view>
      <view class="list">
        <view class="item" :class="{ active: opt.type == item.id }" v-for="(item, index) in postList" :key="index" @click="tap(item, 'type')">{{ item.name }}</view>
      </view>
      <view class="bigTitle">文章分类</view>
      <view class="list">
        <view class="item" :class="{ active: opt.tag_id == '' }" @click="tap({id: ''}, 'tag_id')">全部</view>
        <view class="item" :class="{ active: opt.tag_id == item.id }" v-for="(item, index) in typeList" :key="index" @click="tap(item, 'tag_id')">{{ item.name }}</view>
      </view>
    </view>
  </uv-popup>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { post } from '@/api';

const emit = defineEmits(['click']);
const popup = ref(null);
const postList = ref([
  { name: '全部', id: 0 },
  { name: '图文', id: 1 },
  { name: '文件', id: 2 },
  { name: '视频', id: 3 }
])
let opt = ref({
  type: 0,
  tag_id: ''
})
let typeList = ref([]);

onMounted(() => {
  getList()
})

function getList(){
  post('api/user/getTagList', { type: 2 }).then(res => {
    if(res.code == 1){
      const data = res.data;
      typeList.value = data;
    }
  })
}
function tap(row, type){
  opt.value[type] = row.id;
  popup.value.close();
  emit('click', opt.value);
}
function init(row){
  opt.value = row;
}
function open(){
  popup.value.open();
}

defineExpose({
  open,
  init
})
</script>

<style lang="scss" scoped>
  .bigTitle{
    font-size: 26rpx;
    color: rgb(148, 148, 148);
    padding: 0 30rpx;
    padding-bottom: 30rpx;
  }
  .list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    padding: 0 30rpx;
    padding-bottom: 30rpx;
    .item{
      color: #000;
      font-size: 28rpx;
      height: 48rpx;
      line-height: 48rpx;
      padding: 0 30rpx;
      background-color: rgba(0, 0, 0, .05);
      border-radius: 10rpx;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      &.active{
        color: rgb(228, 50, 34);
      }
    }
  }
</style>